Knowing when your app has networked, connectivity can be very helpful and avoid complicated or unnecessary
error handling when trying to perform network requests under offline conditions.
So in the short list and we'll see how to use that HTML5 Navigator API to check network status, the
primary API here being the Navigator online property.
But we also have some access to events which I'll demonstrate in a minute.
Navigator, of course, being a global window object as with any other HTML5 API.
So this is exclusive to the Renderer process in indexed GML.
I'll start by creating a simple network status indicator.
Using this H1 tag say app is with an underscore tag that we can select to set the status using an ID
of status, then working in line.
We can check the initial network status when loading the app.
Start by selecting the status element, assigning the domino to status node document dot gate element
by I.D. status.
Then we can set this element text based on the navigators online property.
Status note dot in a text equals using a ternary operator navigator dot online, which, if true, will
set the status text to online else, meaning navigator dot online return false will set it to offline,
save this reload main window and their app is online now to test network conditions.
We can normally use the network conditions tab individuals.
This one here setting throttling to offline.
Refresh the window again.
App is offline.
Back on refresh again and we're back.
So this is a simple solution for checking network status explicitly.
But we can also implement event listeners to notify us of network changes.
I'll create a function to set the status text with const set status equals a function with a single
argument of status.
This just being a truthy or falsey value move that node selector into the function, reusing the same
ternary operator, checking instead of Navigator's online.
The status argument pass to the function perform as before the check on load calling set status with
the status value being navigated online.
Then to have any subsequent changes to the network status reported, we can listen on the window object
so window don't add event listener.
Online, meaning the app went back online, call said status true, duplicate this listener for the
offline event.
Calling said status false.
Saif.
Reload the window, which does the initial check and confirms that we're online, said throttling to
offline the header updates accordingly.
And the same when going back online.